<template>
	<view class="flex column space-between addAccompany width-full">
		<view class="userTitle flex box-sizing  space-between items-center">
			<!-- <view class="box-sizing paddingLeft-30">
				<u-icon @click="uni.navigateBack()" name="arrow-left" :size="25" ></u-icon>
			</view>
			<view style="margin-left: calc(0px - 20px - 15rpx );" class="flex box-sizing  flex-center items-center height-full">
				<view class="fontSize-30 weight-700 marginRight-10">
					{{stuentInfo.name+'(学法记录)'}}
				</view>
			</view>
			<view class=""></view> -->
			<view class="box-sizing paddingLeft-30" style="width: 120rpx;">
				<u-icon @click="uni.navigateBack()" name="arrow-left" :size="25"></u-icon>
			</view>
			<view style="flex: 1;padding-left: calc(10rpx);"
				class=" flex box-sizing  flex-center items-center height-full">
				<view class="fontSize-30 weight-700 marginRight-10">
					添加学员
				</view>
			</view>
			<view class="right box-sizing paddingRight-30">
				<view @click="$u.throttle(submit, 500)"
					class="submit flex flex-center items-center fontSize-27 color-white">
					提交
				</view>
			</view>
		</view>
		<view class="crads  box-sizing padding-30 ">
			<u--form labelPosition="left" :model="form" ref="uForm" :labelWidth="90">
				<u-form-item label="学员姓名" prop="name" borderBottom ref="item1" required>
					<u--input v-model="form.name" placeholder="请输入学员姓名" border="none"></u--input>
				</u-form-item>
				<u-form-item label="座位号" prop="seat" borderBottom ref="item1">
					<u--input v-model="form.seat" disabledColor="#ffffff" placeholder="请输入座位号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom ref="item1">
					<u-radio-group v-model="form.sex" placement="row">
						<u-radio activeColor="red" :name="1" label=" 男 "></u-radio>
						<u-radio activeColor="red" :name="2" label=" 女 "></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="阶段" prop="stage_id" borderBottom ref="item1" required>
					<u-radio-group v-model="form.stage_id" placement="row">
						<u-radio activeColor="red" :name="1" label=" 小学 "></u-radio>
						<u-radio activeColor="red" :name="2" label=" 初中 "></u-radio>
						<u-radio activeColor="red" :name="3" label=" 高中 "></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="form.stage_id" label="年级" prop="grade_name" borderBottom ref="item1" required
					@click="gradeShow = true;">
					<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.grade_name" disabled
						disabledColor="#ffffff" placeholder="请选择年级" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="学校" prop="school" borderBottom ref="item1">
					<u--input v-model="form.school" disabledColor="#ffffff" placeholder="请输入学校"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="学习科目" prop="subject_name" required borderBottom @click="subject_nameShow = true;"
					ref="item1">
					<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.subject_name" disabled
						disabledColor="#ffffff" placeholder="请选择学习科目" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="学校科目" prop="subject_name_school" required borderBottom
					@click="subject_name_schoolShow = true;" ref="item1">
					<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.subject_name_school" disabled
						disabledColor="#ffffff" placeholder="请选择学校科目" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="生日" prop="birthday" borderBottom ref="item1" required @click="birthdayShow = true;">
					<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.birthday" disabled
						disabledColor="#ffffff" placeholder="请选择生日" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="学生手机号" prop="mobile" borderBottom ref="item1">
					<u--input v-model="form.mobile" disabledColor="#ffffff" placeholder="请输入学生手机号"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="身份证号" prop="card_no" borderBottom ref="item1">
					<u--input v-model="form.card_no" disabledColor="#ffffff" placeholder="请输入身份证号"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="家长姓名" prop="parent_name" borderBottom ref="item1">
					<u--input v-model="form.parent_name" disabledColor="#ffffff" placeholder="请输入家长姓名"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="家长电话" prop="parent_mobile" borderBottom ref="item1">
					<u--input v-model="form.parent_mobile" disabledColor="#ffffff" placeholder="请输入家长电话"
						border="none"></u--input>
				</u-form-item>

				<u-form-item label="用户名" prop="username" borderBottom ref="item1">
					<u--input v-model="form.username" disabledColor="#ffffff" placeholder="请输入用户名"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="password" borderBottom ref="item1">
					<u--input v-model="form.password" disabledColor="#ffffff" placeholder="请输入密码"
						border="none"></u--input>
				</u-form-item>

				<u-form-item label="头像" prop="avatar" borderBottom ref="item1">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
						:maxCount="1"></u-upload>
				</u-form-item>

			</u--form>
		</view>
		<!-- <view class="operation flex box-sizing space-around items-center">
			<view @click="$u.throttle(submit, 500)" class="flex flex-center items-center fontSize-30 color-white">
				提交
			</view>
		</view> -->
		<u-datetime-picker :show="birthdayShow" mode="date"   @cancel="birthdayShow = false"
			@confirm="datetimeClick"></u-datetime-picker>
		<!-- <u-calendar :minDate="minDate" :show="datetimeShow" closeOnClickOverlay @confirm="datetimeClick"
			@close="datetimeShow = false"></u-calendar> -->
		<!-- @confirm = "(e)=>form.px_date = e" -->
		<!-- <u-datetime-picker
			:show="start_timeShow"
			v-model="form.start_time"
			@cancel = "start_timeShow = false"
			@confirm = "(e)=>timeConfirm(e,'start_time','start_timeShow')"
			mode="time"
		></u-datetime-picker>
		<u-datetime-picker
			:show="end_timeShow"
			v-model="form.end_time"
			mode="time"
			@cancel = "end_timeShow = false"
			@confirm = "(e)=>timeConfirm(e,'end_time','end_timeShow')"
		></u-datetime-picker> -->
		<!-- 阶段 -->
		<!-- <u-picker :show="stageShow" :columns="sjds" keyName="label" closeOnClickOverlay @close="stageShow = false"
			@cancel="stageShow = false" @confirm="stageConfirm"></u-picker> -->
		<!-- 年级 -->
		<u-picker :show="gradeShow" :columns="grade_ids" keyName="label" closeOnClickOverlay @close="gradeShow = false"
			@cancel="gradeShow = false" @confirm="gradeConfirm"></u-picker>
		<!-- 学校科目 -->
		<!-- <u-picker :show="subject_name_schoolShow" :columns="sjds" keyName="label" closeOnClickOverlay @close="subject_name_schoolShow = false"
			@cancel="subject_name_schoolShow = false" @confirm="subject_name_schoolShowConfirm"></u-picker> -->
		<!-- 学习科目 -->
		<!-- <u-picker :show="subject_nameShow" :columns="sjds" keyName="label" closeOnClickOverlay @close="subject_nameShow = false"
			@cancel="subject_nameShow = false" @confirm="subject_nameShowConfirm"></u-picker> -->



		<!-- <u-picker :show="start_timeShow" :columns="sjds" keyName="label" closeOnClickOverlay
			@close="start_timeShow = false" @cancel="start_timeShow = false" @confirm="timeConfirm"></u-picker> -->
		<!-- <u-picker :show="subject_idShow" :columns="subject_idData" keyName="name" closeOnClickOverlay
			@close="subject_idShow = false" @cancel="subject_idShow = false" @confirm="subjectChange"></u-picker> -->
		<!-- <u-picker :show="method_idShow" :columns="method_idData" @cancel = "method_idShow = false" @confirm = "method_idChange" ></u-picker> -->
		<!-- 学习科目 -->
		<u-popup bgColor="#fff" :round="10" closeOnClickOverlay :show="subject_nameShow" @close="treeClose"
			@open="subject_nameShow = true">
			<view class="popupTreeBox">
				<DaTreeVue2 ref="DaTreeRef" :data="subject_idss" labelField="label" valueField="value" 
					showCheckbox :defaultCheckedKeys="defaultCheckedKeysValue" @change="handleTreeChange"
					@expand="handleExpandChange" />
			</view>
		</u-popup>
		<!-- 学校科目 -->
		<u-popup bgColor="#fff" :round="10" closeOnClickOverlay :show="subject_name_schoolShow" @close="treeClose1"
			@open="subject_name_schoolShow = true">
			<view class="popupTreeBox">
				<DaTreeVue2 ref="DaTreeRef1" :data="subject_idss" labelField="label" valueField="value" 
					showCheckbox :defaultCheckedKeys="defaultCheckedKeysValue1" @change="handleTreeChange1"
					@expand="handleExpandChange1" />
			</view>
		</u-popup>
	</view>
</template>

<script>
import DaTreeVue2 from '@/components/da-tree-vue2/index.vue'
const d = new Date()
let year = d.getFullYear()
let month = d.getMonth() + 1
let day = d.getDate()
month = month < 10 ? `0${month}` : month
let minDate = parseInt(new Date()) - 365 * 24 * 60 * 60 * 1000
console.log(minDate, ',mmmmmmmmmmmmmm')
const date = d.getDate()
export default {
	components: {
		DaTreeVue2
	},
	data() {
		return {

			minDate: minDate,
			// minDate: `${year}-${month - 1}-${date}`,
			defaultCheckedKeysValue: [],
			defaultCheckedKeysValue1: [],
			asyncTreeData: [],
			stuentInfo: {},
			fileList1: [],
			studentSubjectData: [],
			birthdayShow: false,
			subject_name_schoolShow: false,
			subject_nameShow: false,
			gradeShow: false,
			datetimeShow: false,
			start_timeShow: false,
			end_timeShow: false,
			subject_idShow: false,
			method_idShow: false,
			type: 1,
			subject_idss: [],
			grade_ids: [
				[]
			],
			sjds: [[]],
			method_idData: [
				[]
			],
			form: {
				birthday: '',
				name: '',
				seat: '',
				sex: 1,
				stage_name: '',
				stage_id: 2,
				grade_name: '',
				grade_id: '',
				school: '',
				birthday: '',
				mobile: '',
				card_no: '',
				parent_name: '',
				parent_mobile: '',
				subject_ids: [],
				subject_name: '',
				subject_id_school: [],
				subject_name_school: '',
				username: '',
				password: '123456',
				class: '',





			},
		};
	},
	watch: {
		"form.stage_id"(val) {
			console.log(val, ',.............')
			this.grade_ids = [[]]
			this.form.grade_name = ''
			this.form.grade_id = ''
			this.getInfo()
		}
	},
	onLoad(op) {
		this.getInfo()

	},
	methods: {
		getInfo() {
			let that = this
			this.$home.studentGetinfo({ stage_id: this.form.stage_id }).then(res => {
				console.log(res, 3333333333)
				// that.infoList = res
				this.grade_ids = res.grade_ids ? [[...res.grade_ids]] : [[]]
				this.subject_idss = res.subject_idss ? res.subject_idss : []
				// that.grade_nameData = res.grade_ids?[[...res.grade_ids]]:[[]],
				// that.pxtypeData = res.pxtypes?[[...res.pxtypes]]:[[]]
			})
		},


		studentSubject() {
			this.$home.studentSubject({ student_id: 0 }).then(res => {
				this.subject_idData[0] = res.data
				console.log(res.data, 6666)
			})
		},
		treeClose() {
			console.log(2222222222)
			this.defaultCheckedKeysValue = [...this.form.subject_ids]
			this.subject_nameShow = false
		},
		treeClose1() {
			console.log(333333)

			this.defaultCheckedKeysValue = [...this.form.subject_id_school]
			this.subject_name_schoolShow = false
		},
		handleTreeChange(allSelectedKeys, currentItem) {
			console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
			this.form.subject_ids = [...allSelectedKeys]
			let checks = this.$refs.DaTreeRef.getCheckedNodes()
			this.form.subject_name = ''
			this.form.subject_name = ''
			// originItem
			if (checks) {
				this.setVal(checks, 'subject_name')
			}
		},
		handleTreeChange1(allSelectedKeys, currentItem) {
			console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
			this.form.subject_id_school = [...allSelectedKeys]
			let checks = this.$refs.DaTreeRef1.getCheckedNodes()
			this.form.subject_name_school = ''
			this.form.subject_name_school = ''
			// originItem
			if (checks) {
				this.setVal(checks, 'subject_name_school')
			}
		},
		setVal(list, key, labelKey = 'label') {
			if (list && list.length > 0) {
				list.map(e => {
					this.form[key] += e.label + ';'
				})
			}
		},
		handleExpandChange(expand, currentItem) {
			console.log('handleExpandChange ==>', expand, currentItem)
		},
		handleExpandChange1(expand, currentItem) {
			console.log('handleExpandChange ==>', expand, currentItem)
		},
		datetimeClick(e) {
			console.log(e, this.$MyUtils.timeFormat(e.value, 'yyyy-MM-dd'), 'pppppppppppp')
			// if (e && e.value > 0) {
			this.form.birthday = this.$MyUtils.timeFormat(e.value, 'yyyy-MM-dd')
			// }
			this.birthdayShow = false
		},
		// 年级
		gradeConfirm(e) {
			console.log(e, ',,,,,,,,,,,')
			if (e && e.value.length > 0) {
				this.form.grade_name = e.value[0].label
				this.form.grade_id = e.value[0].value
			}
			this.gradeShow = false
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$uploadUrl+'Upload/upload', // 仅为示例，非真实的接口地址
					// url: 'http://bbsf.test/api/Upload/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						upload_config_id: 1
					},
					header: {
						token: uni.getStorageSync('token'),
						// 'content-type': 'multipart/form-data'
					},
					success: (res) => {
						resolve(JSON.parse(res.data).data)
					},
					fail: (err) => {
						console.log(err, 999)
					}
				});
			})
		},
		submit() {
			let that = this
			let form = this.form
			if (!form.name || form.name == '') {
				return uni.showToast({
					title: '请输入学员姓名',
					icon: 'none'
				})
			}
			if (!form.grade_name || form.grade_name == '') {
				return uni.showToast({
					title: '请选择年级',
					icon: 'none'
				})
			}
			if (!form.subject_name || form.subject_name == '') {
				return uni.showToast({
					title: '请选择学习科目',
					icon: 'none'
				})
			}
			if (!form.subject_name_school || form.subject_name_school == '') {
				return uni.showToast({
					title: '请选择学校科目',
					icon: 'none'
				})
			}
			if (!form.birthday || form.birthday == '') {
				return uni.showToast({
					title: '请选择生日',
					icon: 'none'
				})
			}

			// if(!form.start_timeName||form.start_timeName == ''){
			// 	return uni.showToast({
			// 		title:'请选择巡视时间',
			// 		icon:'none'
			// 	})
			// }
			// if(!form.subject_name||form.subject_name == ''){
			// 	return uni.showToast({
			// 		title:'请选择科目',
			// 		icon:'none'
			// 	})
			// }
			// this.$refs.uForm.validate().then(res => {

			let defaultUser = uni.getStorageSync('userInfo')
			let params = {
				// user_id: defaultUser.user_id,
				// dept_id: defaultUser.dept_id,
				// comp_no: defaultUser.comp_no
			}
			form.subject_ids = form.subject_ids ? form.subject_ids.join() : ''
			form.subject_id_school = form.subject_id_school ? form.subject_id_school.join() : ''
			params = { ...params, ...form }

			this.$home.studentAdd(params).then(res => {
				if (res.status == 200) {
					uni.showToast({
						title: '提交成功!',
						icon: 'none'
					})
					uni.navigateBack()

					let pages = getCurrentPages()
					let backPage = pages && pages.length > 0 ? pages[pages.length - 2].$vm : {}
					if (backPage) {
						backPage.updateState()
					}
				} else {
					uni.$u.toast('提交失败')
				}
			})


			// }).catch(errors => {
			// 	uni.$u.toast('校验失败')
			// })
		},

	}
}
</script>

<style lang="scss" scoped>
.addAccompany {
	height: 100vh;
	box-sizing: border-box;

	.popupTreeBox {
		width: 100%;
		height: 60vh;
		padding-top: 50rpx;
		overflow-y: auto;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.userTitle {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
	}

	.crads {
		width: 100%;
		height: calc(100vh - 120rpx - 120rpx);
		overflow-y: auto;

		.card {
			width: calc(100% - 60rpx);
			background-color: #f7f7f7;
			color: #333;
		}
	}

	.operation {
		width: 100%;
		height: 120rpx;
		// background-color: #f7f7f7;
		background-color: #fff;

		view {
			width: 80%;
			border-radius: 500rpx;
			padding: 20rpx 0;
			border: 1rpx solid #fff;
			background-color: #ea9700a1;
		}
	}


	.submit {
		width: 120rpx;

		padding: 5rpx 0rpx;
		border-radius: 10rpx;
		border: 1rpx solid #fff;
		background-color: #ea9700a1;
	}
}
</style>
